<template >
    <div class="bgcolor" style="height:100%;">
        <div class="ms-doc">
            <i class="icon iconfont icon-yanzhengma"></i>
            <div class="vue_search ms-title" ref="search">
                <!--  查询条件 -->
                <el-form :model="formInline" label-width="60px" class="demo-form-inline" style="margin-left: -9px;">
                    <el-form-item label="城市" prop="name" >
                        <el-select v-model="params.defCityVal" clearable filterable placeholder="试着搜索：北京市"  @change = 'selCityWay'>
                            <el-option   v-for="item in cityData":key="item.FLD_AREACODE" :label="item.FLD_NAME"   :value="item.FLD_AREACODE"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="公司" prop="name" >
                        <el-select v-model="params.delCompanyVal" clearable filterable placeholder="试着搜索：北京市"  @change = 'selCompanWay'>
                            <el-option   v-for="item in companyData":key="item.FLD_ID" :label="item.FLD_CORPORATE_NAME"   :value="item.FLD_ID"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="路线" prop="name" >
                        <el-select v-model="params.delRouteVal" clearable filterable placeholder="试着搜索：北京市" >
                            <el-option no-data-text="请选择城市"   v-for="item in routeData":key="item.FLD_BUS_LINE_ID" :label="item.FLD_BUS_LINE_NAME"   :value="item.FLD_BUS_LINE_ID" @change = 'selRouteWay'></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="时间" prop="name" label-width="60px">
                        <div  style="position: relative;" class="search-time2" >
                            <b class="md"></b>
                            <el-date-picker v-model="params.timeData"  type="date" placeholder="选择日期"  :picker-options="pickerOptions1"> </el-date-picker>
                        </div>
                    </el-form-item>
                    <div class="el-form-item"><a @click="listseachbtn" class="sm-row3">&nbsp;&nbsp;<el-button type="primary" style="">查询设备状态</el-button></a>
                        <a @click="listseachbtn2" class="sm-row3">&nbsp;&nbsp;<el-button type="primary" style="">查询交易量</el-button></a>
                    </div>
                </el-form>
            </div>
            <!--设备状态统计  开始-->
            <div class="table-info" >
                <!-- 列表 -->
                <div class="echarts">
                    <div class="title">设备状态</div>
                    <div class="echarts-info" style="height: 100%;width: 100%" :style="dataTable">
                        <div class="info"><div id="myChart" :style="{width: '100%', height: '100%'}"></div></div>
                        <div class="echarts-right"  :style="dataTable2"></div>
                    </div>
                </div>
            </div>
            <!--设备状态统计  结束-->
            <!--交易量统计  开始-->
            <div class="table-info" >
                <!-- 列表 -->
                <div class="echarts">
                    <div class="title">交易</div>
                    <div class="echarts-info" style="height: 100%;width: 100%" :style="dataTable">
                        <div class="info"><div id="myChart2" :style="{width: '100%', height: '100%'}"></div></div>
                        <div class="echarts-right" :style="dataTable2"></div>
                    </div>
                </div>
            </div>
            <!--交易量统计  结束-->
        </div>
    </div>
</template>
<script>
    const insurance = require( '../../../api/insurance');        //   接口js引用
    export default {
        data: () => ({
            cityData: [],        // 城市数据列表
            defCityValStu:true,
            companyData:[],     // 公司数据列表
            routeData: [],      // 路线数据列表
            // 时间插件数据
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
            },
            dataTable:{'height':(document.body.clientHeight-200)/2-100+'px','width':'100%'},
            dataTable2:{'min-height':(document.body.clientHeight-10)/2-100+'px'},
            screenHeight: document.body.clientHeight,//减去header的60px
            screenWidth: document.body.clientWidth-200,//减去header的60px
            dataList:[],                    // 设备状态数据列表
            dataList2:[],                   // 交易量数据列表
            params:{
                defCityVal: undefined,     // 默认选中城市
                delCompanyVal:undefined,  // 公司默认选中
                delRouteVal:undefined,    // 默认选中路线
                timeData:'',
                serachTime:'123'
            },
            orderDataList:'',
            // 交易折线统计
            line: {
                tooltip : {
                    trigger: 'axis', // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
                    showDelay: 0,             // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
                    hideDelay: 500,            // 隐藏延迟，单位ms
                    backgroundColor: 'rgba(255, 255, 255, 0.74)',     // 提示背景颜色，默认为透明度为0.7的黑色rgba(1, 74, 111, 0.79)rgba(12, 100, 144, 0.7)
                    borderColor: '#333',       // 提示边框颜色
                    borderRadius: 4,           // 提示边框圆角，单位px，默认为4
                    borderWidth: 0,            // 提示边框线宽，单位px，默认为0（无边框）
                    padding: 15,                // 提示内边距，单位px，默认各方向内边距为5，
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'line',         // 默认为直线，可选为：'line' | 'shadow'
                        lineStyle : {          // 直线指示器样式设置
                            color: 'rgb(0, 128, 192)',
                            width: 1,
                            type: 'solid'
                        },
                        shadowStyle : {                       // 阴影指示器样式设置
                            width: 'auto',                   // 阴影大小
                            background:'rgb(0, 128, 192)',
                            color: 'rgba(6, 61, 88, 0.91)'  // 阴影颜色
                        }
                    },
                    toolbox: {
                        show : true,
                        feature: {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore : {show: true},
                            saveAsImage : {show: true},
                        }
                    },
                    textStyle: {
                        color: '#272727'
                    },
                },
                legend: {   // 右边标题
                    // x : '80%',
                    width:500,
                    // height:10,
                    right:'0px',
                    y : '0px',
                    itemWidth: 16,  // 图标大小
                    itemHeight: 16,
                    itemGap: 8,        // 图标间隔
                    orient: 'vertical', // 整行显示
                    align: 'left',      // 图标位置
                    textStyle: { fontSize: 16, color: '#333' },
                    data: ['正常（没有故障）', 'Psam卡异常', '未设置运参卡', '设备注册成功', '银联签到失败', '设备未授权', '设备重复注册','在线POS终端'],
                },
                calculable : true,
                grid: {
                    top:'10px',
                    left: '0%',
                    right: '200px',
                    bottom: '0%',
                    containLabel: true
                },
                dataZoom : {//实现缩放功能
                    show : true,
                    realtime : true,
                    startValue:140,                           //数据窗口范围的起始数值
                    endValue:144,                            //数据窗口范围的结束数值。
                },
                xAxis : [
                    {
                        axisLabel:{rotate:0, interval:0},       // 数据x轴旋转
                        axisLine:{lineStyle:{color:'#999'}},  // X 轴颜色
                        type : 'category',
                        boundaryGap : false,                   // 从0刻度开始
                        data : ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23'] // X 轴数据
                    }
                ],
                yAxis : [
                    {
                        axisLine:{lineStyle:{color:'#999'}}, // Y 轴颜色
                        type : 'value'
                    }
                ],
                series : []
            },
            line2: {
                tooltip : {
                    trigger: 'axis', // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
                    showDelay: 0,             // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
                    hideDelay: 500,            // 隐藏延迟，单位ms
                    backgroundColor: 'rgba(255, 255, 255, 0.74)',     // 提示背景颜色，默认为透明度为0.7的黑色rgba(1, 74, 111, 0.79)rgba(12, 100, 144, 0.7)
                    borderColor: '#333',       // 提示边框颜色
                    borderRadius: 4,           // 提示边框圆角，单位px，默认为4
                    borderWidth: 0,            // 提示边框线宽，单位px，默认为0（无边框）
                    padding: 15,                // 提示内边距，单位px，默认各方向内边距为5，
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'line',         // 默认为直线，可选为：'line' | 'shadow'
                        lineStyle : {          // 直线指示器样式设置
                            color: 'rgb(0, 128, 192)',
                            width: 1,
                            type: 'solid'
                        },
                        shadowStyle : {                       // 阴影指示器样式设置
                            width: 'auto',                   // 阴影大小
                            background:'rgb(0, 128, 192)',
                            color: 'rgba(6, 61, 88, 0.91)'  // 阴影颜色
                        }
                    },
                    toolbox: {
                        show : true,
                        feature: {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore : {show: true},
                            saveAsImage : {show: true},
                        }
                    },
                    textStyle: {
                        color: '#272727'
                    },
                },
                legend: {
                    right:'46px',
                    y : '10px',
                    itemWidth: 16,  // 图标大小
                    itemHeight: 16,
                    itemGap: 12,        // 图标间隔
                    orient: 'vertical', // 整行显示
                    align: 'left',      // 图标位置
                    textStyle: { fontSize: 16, color: '#333' },
                    data: ['二维码支付', '实体卡支付', '银联支付'],
                },
                calculable : true,
                grid: {
                    top:'10px',
                    left: '0%',
                    right: '200px',
                    bottom: '0%',
                    containLabel: true
                },
                dataZoom : {    //实现缩放功能
                    show : true,
                    realtime : true,
                    startValue:140,                           //数据窗口范围的起始数值
                    endValue:144,                            //数据窗口范围的结束数值。
                },
                xAxis : [
                    {
                        axisLabel:{rotate:0, interval:0},       // 数据x轴旋转
                        axisLine:{lineStyle:{color:'#999'}},  // X 轴颜色
                        type : 'category',
                        boundaryGap : false,                   // 从0刻度开始
                        data : ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23'] // X 轴数据
                    }
                ],
                yAxis : [
                    {
                        axisLine:{lineStyle:{color:'#999'}}, // Y 轴颜色
                        type : 'value'
                    }
                ],
                series : []
            },
        }),
        // 数据定时执行事件
        created: function () {
            setInterval(this.pubLicListWap, 600000);
            setInterval(this.pubLicListWap2, 3600000);
        },
        methods:{
            drawLine(){
                let myChart = this.$echarts.init(document.getElementById('myChart'));
                this.pub(myChart);
                myChart.setOption(this.line);
                window.onresize = function(){ myChart.resize();};
                myChart.on('click', function (params) {});
            },
            drawLine2(){
                let myChart = this.$echarts.init(document.getElementById('myChart2'));
                this.pub(myChart);
                myChart.setOption(this.line2);
                window.onresize = function(){ myChart.resize();};
                myChart.on('click', function (params) {});
            },
            pub(myChart){
                myChart.on('click', function (params) {
                    console.log('点击');
                    console.log(params);
                });
            },
            // 设备状态统计公共列表
            pubLicListWap(){
                var that = this;
                var params = 'FLD_CTIYCODE='+that.params.defCityVal+'&FLD_COMPANYID='+that.params.delCompanyVal+'&FLD_BUSLINE='+that.params.delRouteVal+'&FLD_ERROR_CODE=0&FLD_STARTTIME='
                    +that.formatTime().startTime+'&FLD_ENDTIME='+that.formatTime().endTime;
                that.line.series = [];
                $.ajax({
                    //url:"http://192.168.0.114:9988/api/PosData/GetPosStatListByLineTotalNEW?"+params,
                    url:insurance.posturl+"PosData/GetPosStatListByLineTotalNEW?"+params,
                    type:"POST",
                    success:function(data){
                        if(data.status){
                            var getdata = JSON.parse(data.data);           // 数据装json
                            console.log(getdata);
                            that.line.xAxis[0].data = getdata.xaxisItems; // 折现数据绑定  x轴  时间
                            that.line.dataZoom.startValue = parseInt(getdata.xaxisItems.length-1);  // 數據展示範圍
                            that.line.dataZoom.endValue = parseInt(getdata.xaxisItems.length-11);
                            that.dataList = getdata.posdataItems;
                            var lineDataArray = [];   // y轴数据绑定，中间变量
                            for(var i = 0; i<that.dataList.length; i++){
                                var lineData = {
                                    name:that.dataList[i].statname,
                                    type:'line',stack: '总量', symbol:'none',  smooth:0.5, data:that.dataList[i].statdata };
                                lineDataArray.push(lineData);
                                var d = parseInt(that.dataList[i].statdata[that.dataList[i].statdata.length-1]);
                            }
                            that.line.series = lineDataArray; // 折现数据绑定 y轴  数量
                            that.drawLine();
                        }else{
                            that.$message.error(data.msg);
                        }
                    },
                    error: function(jqXHR){
                        that.$message.error('发生错误'+jqXHR.status);
                    }
                });
            },

            // 交易量统计公共列表
            pubLicListWap2(){
                var that = this;
                var d = new Date(that.params.timeData);
                that.params.serachTime = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
                var startTime =  that.params.serachTime+ ' '+'00:00:00';
                var endTime = that.params.serachTime+' '+'23:00:00';
                var params = 'FLD_CTIYCODE='+that.params.defCityVal+'&FLD_COMPANYID='+that.params.delCompanyVal+'&FLD_BUSLINE='+that.params.delRouteVal+'&FLD_ERROR_CODE=0&FLD_STARTTIME='+startTime+'&FLD_ENDTIME='+endTime;
                that.line.series = [];
                $.ajax({
                    url:insurance.posturl+"PosData/GetPayPassgerListByLineTotal?"+params,
                    type:"POST",
                    success:function(data){
                        if(data.status){
                            var getdata = JSON.parse(data.data);
                            that.line2.xAxis[0].data = getdata.xaxisItems;
                            that.line2.dataZoom.startValue = parseInt(getdata.xaxisItems.length-1);
                            that.line2.dataZoom.endValue = parseInt(getdata.xaxisItems.length-11);
                            that.dataList2 = getdata.seriesItems;
                            var lineDataArray = [];
                            for(var i = 0; i<that.dataList2.length; i++){
                                var lineData = {
                                    name:that.dataList2[i].statname,
                                    type:'line',stack: '总量', symbol:'none',  smooth:0.5, data:that.dataList2[i].statdata};
                                var d = parseInt(that.dataList2[i].statdata[that.dataList2[i].statdata.length-1]);
                                lineDataArray.push(lineData);
                            }
                            that.line2.legend.data = [that.dataList2[0].statname, that.dataList2[1].statname, that.dataList2[2].statname,];
                            that.line2.series = lineDataArray;
                            that.drawLine2();
                        }else{
                            that.$message.error(data.msg);
                        }
                    },
                    error: function(jqXHR){
                        that.$message.error('发生错误'+jqXHR.status);
                    }
                });
            },
            // 查询
            listseachbtn(){
                this.pubLicListWap();
            },
            listseachbtn2(){
                this.pubLicListWap2();
            },

            // -----------------------  获取数据 方法 ---------------------
            // 城市选择
            selCityWay(){
                if(this.params.defCityVal != '' || this.params.defCityVal != undefined){
                    this.getCompanyData(this.params.defCityVal);
                    if(this.defCityValStu){  // 第一次加载时调用
                        this.pubLicListWap();   // 获取设备状态统计列表信息
                        this.pubLicListWap2();   // 获取交易量列表统计信息
                    }
                }
                this.companyData = [];
                this.routeData = [];
                this.params.delCompanyVal = undefined;
                this.params.delRouteVal = undefined;
            },

            // 公司选择
            selCompanWay(){
                if(this.params.delCompanyVal != '' || this.params.delCompanyVal != undefined){
                    this.getRoteData(this.params.delCompanyVal);
                }
                this.routeData = [];
                this.params.delRouteVal = undefined;

            },
            // 获取城市列表
            getCityData(){
                var that = this;
                $.ajax({
                    url:insurance.posturl+"SysInfo/GetCityList?str=0",
                    type:"POST",
                    success:function(data){
                        if(data.status){
                            that.cityData = JSON.parse(data.data);
                            var userCity = localStorage.setItem('ms_usercity',data.data.FLD_FLEET_ID);
                            if(userCity != null || userCity != undefined){
                                that.params.defCityVal = localStorage.setItem('ms_usercity',data.data.FLD_FLEET_ID);
                            }else{
                                that.params.defCityVal = that.cityData[0].FLD_AREACODE;
                            }
                        }else{
                            that.$message.error(data.msg);
                        }
                    },
                    error: function(jqXHR){
                        that.$message.error('获取数据超时');
                    }
                });
            },

            // 获取公司 -- 根据城市id
            getCompanyData(citycod){
                var that = this;
                $.ajax({
                    url:insurance.posturl+"SysInfo/GetCompanyList?FLD_CITY_CODE="+citycod,
                    type:"POST",
                    success:function(data){
                        if(data.status){
                            that.companyData = JSON.parse(data.data);
                            //    that.params.delCompanyVal = that.companyData[0].FLD_ID;
                            //     that.params.delCompanyVal = '';
                        }else{
                            that.$message.error(data.msg);
                        }
                    },
                    error: function(jqXHR){
                        that.$message.error('获取数据超时');
                    }
                });
            },

            // 获取路线 -- 根据公司id
            getRoteData(compancod){
                var that = this;
                $.ajax({
                    url:insurance.posturl+"SysInfo/GetLineList?FLD_COMPANY_ID="+compancod,
                    type:"POST",
                    success:function(data){
                        if(data.status){
                            that.routeData = JSON.parse(data.data);
                            //   that.params.delRouteVal = that.routeData[0].FLD_BUS_LINE_ID;
                        }else{
                            that.$message.error(data.msg);
                        }
                    },
                    error: function(jqXHR){
                        that.$message.error('发生错误'+jqXHR.status);
                    }
                });
            },
            // 时间转换方法
            formatTime(){
                var d = new Date(this.params.timeData);
                this.params.serachTime = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
                var startTime =  this.params.serachTime+ ' '+'00:00:00';
                var endTime = this.params.serachTime+' '+'23:59:59';
                return {'startTime':startTime,'endTime':endTime};
            },
        },
        mounted(){
            this.dataTable = {'height':(this.screenHeight-200)/2-100+'px','width':'100%'};
            this.dataTable2 = {'min-height':(this.screenHeight-10)/2-100+'px'};
            let myChart = this.$echarts.init(document.getElementById('myChart'));
            myChart.setOption(this.line);
            myChart.on('click', function (params) {});
            let myChart2 = this.$echarts.init(document.getElementById('myChart2'));
            myChart2.setOption(this.line2);
            myChart2.on('click', function (params) {});
            const that = this;
            // 浏览器拖拽变化
            window.onresize = () => {
                myChart.resize();
                myChart2.resize();
                return (() => {
                    window.screenWidth = document.body.clientWidth;
                    that.screenWidth = window.screenWidth;
                })()
            };
            // this.drawLine();
            var t = new Date;
            that.params.timeData =  new Date(t.getFullYear(), t.getMonth(), t.getDate(), t.getHours(), t.getMinutes());
            that.screenHeight = `${document.documentElement.clientHeight}`;
            if(that.screenHeight < 900){
                that.line.grid.right = '300px';
            }
            that.getCityData();     // 获取城市信息
        }
    }
</script>

<style src="../../../../static/css/datasource.css"></style>
<style src="../../../../static/css/common.css"></style>
<style src="../../../../static/css/main.css"></style>
<style scoped>
    /*.echarts-info .info{background: red; }*/
    .myChart>div{width: 100%; height: 100%; background: yellow;}
    .no-data {font-size: 50px; text-align: center;  margin: 50px;color: #d0d0d0;}
    .search-time2 {position: relative;}
    .search-time2 .el-icon-time{left: 0px !important;}
    .search-time2 .el-input__inner{padding-left:35px; padding-right: 0px;}
    .search-time2 .md{position: absolute;background: white;z-index: 999;width:25px;height: 80%;top: 2px;right: 8px;}
    .search-time2 .el-icon-date{left: 0px !important;}
    .el-input__icon{left: 0px !important;}
    i,b,em{ font-style: normal;font-weight: normal;}
    .echarts {position: relative; margin-top: 15px;}
    .echarts .title{ color: #333; font-size: 16px;}
    .echarts .echarts-info{margin-top:10px; background: #fff; padding: 10px 20px; display: flex;}
    .echarts .echarts-info .info{flex: 1;}
    .echarts-right{margin-right:100px; height: 100%; height:260px; z-index: 999; min-height: 1px;}
    /*.echarts-right span{display: flex; overflow: hidden; margin: 10px 0px}*/
    .input-data .el-input__inner{ width: 173px !important;}
</style>
